<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<%@ page language="java" import="java.util.ArrayList"
	import="dao.DataAccess" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link
	href="<%=request.getContextPath()%>/CSS/ui-darkness/jquery-ui-1.9.2.custom.css"
	rel="stylesheet">
<script src="<%=request.getContextPath()%>/JS/jquery-1.8.3.js"></script>
<script src="<%=request.getContextPath()%>/JS/jquery-ui-1.9.2.custom.js"></script>

<title>FlangeData - View</title>
<%@ include file="links.jsp"%>
<style type="text/css" title="currentStyle">
@import "<%=request.getContextPath()%>/CSS/demo_page.css";

@import "<%=request.getContextPath()%>/CSS/header.ccss";

@import "<%=request.getContextPath()%>/CSS/demo_table_jui.css";

@import
	"<%=request.getContextPath()%>/CSS/ui-darkness/jquery-ui-1.9.2.custom.css"
	;
</style>
<style>
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

.demoHeaders {
	margin-top: 2em;
}

#dialog-link {
	padding: .4em 1em .4em 20px;
	text-decoration: none;
	position: relative;
}

#dialog-link span.ui-icon {
	margin: 0 5px 0 0;
	position: absolute;
	left: .2em;
	top: 50%;
	margin-top: -8px;
}

#icons {
	margin: 0;
	padding: 0;
}

#icons li {
	margin: 2px;
	position: relative;
	padding: 4px 0;
	cursor: pointer;
	float: left;
	list-style: none;
}

#icons span.ui-icon {
	float: left;
	margin: 0 4px;
}
</style>
<script>
	$(function() {

		$(document)
				.ready(
						function() {
							2
							$("#button")
									.wrap(
											'<a href="http://localhost:8080/Flange-Data/JSP/FlangeData-create.jsp"></a>');
							3
						});
		$("#button").button();
	});
</script>
<script type="text/javascript" language="javascript"
	src="<%=request.getContextPath()%>/JS/jquery.js"></script>
<script type="text/javascript" language="javascript"
	src="<%=request.getContextPath()%>/JS/jquery.dataTables.js"></script>
	<script src="<%=request.getContextPath()%>/JS/ColVis.js"></script>
<script type="text/javascript" charset="utf-8">
// 	$(document).ready(function() {
// 		oTable = $('#example').dataTable({
// 			"bJQueryUI" : true,
// 			"sPaginationType" : "full_numbers"
// 		});
// 	});
	$(document).ready(function() {
		$('#example').dataTable({
			"bJQueryUI" : true,
			"sPaginationType" : "full_numbers",
			"sScrollX": "100%",
		    "bScrollCollapse": true,
			
			"sDom" : 'C<"clear">lfrtip',
			"oColVis" : {
				"aiExclude" : [ 0 ]
			}
		});
	});
</script>
<script type="text/javascript">
	(function() {
		var bsa = document.createElement('script');
		bsa.type = 'text/javascript';
		bsa.async = true;
		bsa.src = '//s3.buysellads.com/ac/bsa.js';
		(document.getElementsByTagName('head')[0] || document
				.getElementsByTagName('body')[0]).appendChild(bsa);
	})();
</script>



</head>
<body>



	<%
		ArrayList<String> AList = (ArrayList<String>) DataAccess
				.fetchList();
		int i_max = AList.size();
		int j_max = i_max / 55;
		System.out.println("Size Retrieved -----------------> "
				+ AList.size());
		System.out.println("Number of Entries --------------> " + j_max);
	%>


	<h1>Instructions</h1>
	<p>To search based on any criteria, just type into the Search Field
		Box ! Be it, based on Client, or Flange Number, or even date, just
		type into the box !</p>

	<h1>Flange Data - Entire Data Range View</h1>

	<div style="overflow: scroll; height: 400px;">
		<div class="demo_jui">
			<table cellpadding="0" cellspacing="0" border="1" class="display"
				id="example">
				<thead>
					<tr>
						<th colspan="6" bgcolor="#404040"><font face="Verdana"
							style="text-shadow: blue; elevation: above; color: white">General</font></th>
						<th colspan="5" bgcolor="#606060"><font face="Verdana"
							style="text-shadow: blue; elevation: above;">Joint
								Integrity Record</font></th>
						<th colspan="9" bgcolor="#404040"><font face="Verdana"
							style="text-shadow: blue; elevation: above; color: white">Flange
								Data</font></th>
						<th colspan="5" bgcolor="#606060"><font face="Verdana"
							style="text-shadow: blue; elevation: above;">Bolt
								Tensioner Record</font></th>
						<th colspan="5" bgcolor="#404040"><font face="Verdana"
							style="text-shadow: blue; elevation: above; color: white">Visual
								Checks</font></th>
						<th colspan="6" bgcolor="#606060"><font face="Verdana"
							style="text-shadow: blue; elevation: above;">Equipment and
								Tool</font></th>
						<th colspan="5" bgcolor="#404040"><font face="Verdana"
							style="text-shadow: blue; elevation: above; color: white">Bolt
								Torquing Record</font></th>
						<th colspan="5" bgcolor="#606060"><font face="Verdana"
							style="text-shadow: blue; elevation: above;">Justrite
								Recommended Loads</font></th>
						<th colspan="3" bgcolor="#404040"><font face="Verdana"
							style="text-shadow: blue; elevation: above; color: white">Customer
								Specific Loads</font></th>
						<th colspan="6" bgcolor="#606060"><font face="Verdana"
							style="text-shadow: blue; elevation: above;">Review And
								Acceptance</font></th>
					</tr>
					<tr>
						<th>Client</th>
						<th>Flange Identification</th>
						<th>Flange Location</th>
						<th>HBT SuperVisor/TL</th>
						<th>HBT Technician</th>
						<th>WorkDate</th>
						<!-- Joint Integrity Record  -->

						<th>Top</th>
						<th>Bottom</th>
						<th>Left</th>
						<th>Right</th>
						<th>Remarks</th>

						<!-- Flange Data  -->

						<th>Nom Dia And Flange Class</th>
						<th>Gasket Type</th>
						<th>Gasket Material</th>
						<th>Bolt Material</th>
						<th>Flange Material</th>
						<th>Bolt Diameter</th>
						<th>No.of Bolts</th>
						<th>Joint Configuration</th>
						<th>Flange/Line Test Pressure</th>
						<!--  Bolt Tensioner Record --->

						<th>No. of Tensioner Used</th>
						<th>Pump Serial Number</th>
						<th>1st Pass Pressure</th>
						<th>2nd Pass Pressure</th>
						<th>Checking Pass Pressure</th>
						<!--   Visual Checks ---->

						<th>Bolt Condition</th>
						<th>Flange Preparation By</th>
						<th>Min. Thread Protrusion</th>
						<th>Thread Form</th>
						<th>Flange Face Condition</th>
						<!--   Equipment & Tool ---->

						<th>Bolt Tensioner</th>
						<th>Model</th>
						<th>Torque Wrench</th>
						<th>Model</th>
						<th>Flogging Spanner</th>
						<th>Model</th>

						<!--  Bolt Torquing Record ---->
						<th>No. of Torque Wrenches Used</th>
						<th>Pump Serial Number</th>
						<th>Lubricant Used</th>
						<th>Lubriant Applied By</th>
						<th>Torque Applied</th>
						<!--   Justrite Recommended Loads ---->
						<th>Residual Bolt Load</th>
						<th>Residual Bolt Stress</th>
						<th>Torque</th>
						<th>Coefficient of Friction</th>
						<th>Pressure Applied</th>
						<!--  Customer Specific Loads---->
						<th>Residual Bolt Load</th>
						<th>Residual Bolt Stress</th>
						<th>Torque</th>
						<!--   Review And Acceptance---->
						<th>Name</th>
						<th>Date</th>
						<th>On Behalf of Company</th>
						<th>Acceptor's Name</th>
						<th>Date</th>
						<th>Flange Tags Attached?</th>
					</tr>
				</thead>
				<tbody>
					<%
						for (int j = 1; j < j_max + 1; j++) {
					%>
					<tr class="gradeA">
						<%
							for (int i = 0; i < 55; i++) {
						%>
						<td><%=AList.get(((j - 1) * 55) + i)%> <!-- /<%=((j - 1) * 55) + i%> --></td>
						<%
							}
						%>
					</tr>
					<%
						}
					%>
				</tbody>
			</table>
		</div>
	</div>
	<div class="spacer"></div>




	<div id="footer" class="clear" style="text-align: center;">
		<p></p>

		<span style="font-size: 10px;"> Flange Data designed and
			created by <strong>A-Labs</strong> &copy; 2013<br>
		</span>
	</div>
</body>
</html>